<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            /* 背景图片 */
            background-image: url(./images/000.webp);
            width: 794px;
            height: 530px;
            /* 可以设置块元素居中 */
            margin: auto;
            /* 设置定位为相对定位 */
            position: relative;
            /* 设置页面上的字体无法选中 */
            user-select: none;
        }

        .memo {
            /* 设置背景颜色 */
            background-color: pink;
            /* 设置内边距 */
            /* padding: 20px; */
            width: 124px;
            height: 78px;
            /* 设置边框 */
            border: 5px solid #FFF;
            /* 设置圆角 */
            border-radius: 20px;
            /* 设置这个盒子为行内块元素 */
            display: inline-block;
            /* 绝对定位 */
            position: absolute;
            z-index: 0;
        }

        .memo h4 {
            border-bottom: 1px solid #000;
            text-align: center;
            padding: 10px;
        }

        .memo .content {
            /* 设置内边距 */
            padding: 10px;
            /* 设置不能换行 */
            white-space: nowrap;
            /* 隐藏超出部分 */
            overflow: hidden;
            /* 超出部分显示三个点 */
            text-overflow: ellipsis;
        }

        .close {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #000;
            width: 14px;
            height: 14px;
            color: #FFF;
            border-radius: 50%;
            line-height: 10px;
        }
        .form {
            margin: 20px auto;
            width: 400px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border: 1px solid;
            align-items: center;
        }
    </style>
</head>

<body>


    <div class="box">

    </div>

    <div class="form">
        <p> 姓名：<input type="text" class="name"></p>
        <p> 内容： <textarea class="text"></textarea></p>
        <p><button id="submit">提交</button></p>
    </div>
    <script>
        // 获取我们的按钮
        let button = document.getElementById("submit");
        // 获取input的输入框(获取到的是一个数组，所以取第一个)
        let input = document.getElementsByClassName("name")[0];
        // 获取我们用户输入的内容textarea
        let textarea = document.getElementsByClassName("text")[0];
        // 获取.box这个墙
        let box = document.getElementsByClassName("box")[0];
        // 定义一个数组，用来存放我们默认有的一些标签(默认有的一些表白)

        let index = 1;
        let arr = [{
            title: "张三",
            content: "喜欢王芳"
        }, {
            title: "王芳",
            content: "喜欢李四"
        }, {
            title: "李四",
            content: "喜欢张三"
        }, {
            title: "尼古拉斯·赵四",
            content: "喜欢周家和"
        }, {
            title: "马宝国",
            content: "喜欢五连鞭"
        }, {
            title: "张三",
            content: "喜欢王芳"
        }, {
            title: "王芳",
            content: "喜欢李四"
        }, {
            title: "李四",
            content: "喜欢张三"
        }, {
            title: "尼古拉斯·赵四",
            content: "喜欢周家和"
        }, {
            title: "马宝国",
            content: "喜欢五连鞭"
        }, {
            title: "张三",
            content: "喜欢王芳"
        }, {
            title: "王芳",
            content: "喜欢李四"
        }, {
            title: "李四",
            content: "喜欢张三"
        }, {
            title: "尼古拉斯·赵四",
            content: "喜欢周家和"
        }, {
            title: "马宝国",
            content: "喜欢五连鞭"
        }];

        // 我把我们向页面添加数据的一系列操作封装成了一个方法
        function add(title, content) {
            // 创建一个div
            let meno = document.createElement("div");
            // 在div中添加内容
            meno.innerHTML =
                `<h4>
                    ${title}
                    <span class="close">x</span>
                </h4>
                <div class="content">
                    ${content}
                </div>`;
            // 给这个div添加一个类名
            meno.className = "memo";

            // 获取我们的meno中的h4中的span标签
            let close = meno.getElementsByClassName("close")[0];
            // 给这个span标签添加点击事件
            close.onclick = function (e) {
                // 点击的时候删除这个标签
                // this  ===>  <span class="close">
                // this.parentNode ===>  <h4>
                // this.parentNode.parentNode   ===>  <div class="meno">
                this.parentNode.parentNode.remove();
                // console.log()
                e.cancelBubble = true;
            }
            // 当我们点击meno的时候就让他到最上面
            // meno.onclick = function() {

            // }
            // 鼠标点下的时候触发这个事件
            meno.onmousedown = function (e) {
                // 设置点击的盒子的图层
                this.style.zIndex = index++;
                // console.log(this)
                // console.log("鼠标点下了")
                let _this = this;
                // 获取我们的meno的原来的位置(距离父盒子的位置)
                let left = this.offsetLeft;
                let top = this.offsetTop;
                // 获取我们鼠标点下的x值和y值(距离浏览器的位置)
                let startx = e.clientX;
                let starty = e.clientY;
                // 给document添加一个鼠标移动时候的方法(鼠标移动的时候触发)
                document.onmousemove = function (e) {
                    // console.log("x轴移动了：" + (e.clientX - startx), "y轴移动了：" + (e.clientY - starty), )
                    // 设置我们盒子的left值和top值
                    // 做判断，防止我们的盒子超出我们墙的范围

                    if (left + (e.clientX - startx) <= 0) { //left最小为0
                        _this.style.left = 0 + "px";
                    } else if (left + (e.clientX - startx) >= (794 - 134)) { //left最大靠右对齐
                        _this.style.left = (794 - 134) + "px";
                    } else { //在范围以内
                        _this.style.left = left + (e.clientX - startx) + "px";
                    }

                    if (top + (e.clientY - starty) <= 0) {
                        _this.style.top = 0 + "px";
                    } else if (top + (e.clientY - starty) >= (530 - 88)) {
                        _this.style.top = (530 - 88) + "px";
                    } else {
                        _this.style.top = top + (e.clientY - starty) + "px";
                    }
                }
            }
            // 鼠标松手的时候触发
            document.onmouseup = function () {
                // console.log("鼠标松开了")

                // 把我们鼠标移动让我们盒子跟着移动的方法给取消掉
                document.onmousemove = null;
            }
            meno.style.zIndex = index++;
            // 设置我们div的位置
            // left>=0&&left<=(大盒子宽度-小盒子宽度【794-134】)
            // top>=0&&top<=(大盒子高度-小盒子高度【530-88】)
            // 把这个div添加到页面上
            meno.style.left = Math.random() * (794 - 134) + "px";
            meno.style.top = Math.random() * (530 - 88) + "px";
            box.appendChild(meno);
        }

        // 把每个对象循环出来，渲染到页面上
        for (let i = 0; i < arr.length; i++) {
            // console.log(arr[i]);
            // 每循环出来一条数据就调用我们向页面添加的方法
            add(arr[i].title, arr[i].content)
        }


        button.onclick = function () {
            // 获取我们input中输入的内容
            let title = input.value;
            // 获取到我们的textarea中输入的内容
            let content = textarea.value;

            // 调用添加方法
            add(title, content);

            // 清空我们的输入框
            input.value = "";
            textarea.value = "";
        }
    </script>
</body>

</html>